<template>
  <view class="container">
    <div class="videotype" :style="{marginTop: statusBarHeight + 'px'}">
    </div>
    <u-swiper :list="list3" previousMargin="30" nextMargin="30" circular :autoplay="true" radius="5" height="160">
    </u-swiper>
    <view class="list">
      <view class="item-list" v-for="item in list" :style="{'backgroundImage':'url('+ item.img +')' }"
        @click="openUrl(item.path)">
        <view class="content">
          {{item.name}}
        </view>
      </view>
    </view>
    <!-- <loading v-show="isLoading"></loading> -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isLoading: true,
        statusBarHeight: 0,
        imageList: [],
        list3: [],
        userName: '',
        list: [{
            name: '刷一刷',
            path: '/pagesB/shua/index',
            img: ''
          }, {
            name: '手机壁纸',
            path: '/pagesB/list?type=phone',
            img: ''
          }, {
            name: '电脑壁纸',
            path: '/pagesB/list?type=pc',
            img: ''
          },
          {
            name: '魔方',
            path: '/pagesB/mofang',
            img: ''
          },{
            name: '懒加载',
            path: '/pagesB/calener',
            img: ''
          }, {
            name: '随机密码',
            path: '/pagesB/copy',
            img: ''
          }
        ]
      }
    },
    onLoad() {
      this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'] + 10;
      this.userName = uni.getStorageSync('userInfo').nickName || '其他未登录用户';
      this.$uniCloud('addlog', {
        type: 'add',
        name: this.userName,
        type_user: 'visit_home'
      })
      // 获取图片列表
      this.$uniCloud('pcimage', {
        type: 'get'
      }).then(res => {
        if (res.result && res.result[0]) {
          this.imageList = res.result[1].data.reverse()
          let num = this.imageList.length -10;
          let val = Math.round(Math.random() * num)
          this.list.forEach((item,index)=>{
            let val1 = Math.round(Math.random() * num)
            item.img = this.imageList[val1].images
          })
          this.imageList.slice(val, val + 10).forEach((item) => {
            this.list3.push(item.images)
          })
          this.isLoading = false
        }
      })
      
    },
    methods: {
      openUrl(url) {
        uni.navigateTo({
          url: url
        })
      }
    }
  }
</script>

<style lang="less">
  .container {
    overflow: hidden;

    .list {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      padding-bottom: 30rpx;

      .item-list {
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        margin-top: 30rpx;
        width: 45%;
        height: 190rpx;
        border-radius: 20rpx;
        box-shadow: 0 0 10rpx rgba(236, 179, 236, 0.9);

        .content {
          left: 50%;
          transform: translateX(-50%);
          bottom: 20rpx;
          position: absolute;
          padding: 6rpx 30rpx;
          color: #fff;
          border-radius: 10rpx;
          font-size: 26rpx;
          background-color: rgba(0, 0, 0, 0.4);
        }
      }
    }
  }
</style>
